<template>
    <div class="container">
        <div class="hotel-head">
            <div class="hotel-title">选择出发城市<img class="hotel-cancel" src="../../../assets/image/home/icon-delete.png" @click="tomade"></div>
            <input class="hotel-search" v-model="keyword" placeholder="搜索" @keyup.enter="searchcity">
        </div>
        <div class="city-body">
           <div class="city-body-list" v-for="item in citylist" @click="selectcity(item)">
               {{item.name}}
           </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import{ getTravelcity } from '../../../api/travel'
    import {mapState, mapMutations, mapActions} from 'vuex'

    export default {
        name: 'Teatravelcity',
        data() {
            return {
                params:{ 'page': 1, 'per_page': 10000 },
                loading: false, // 是否加载更多
                isMore: true, // 是否有更多
                keyword:'', //关键字
                citylist:[], //城市列表
            }
        },
        computed: {
            ...mapState({
                user: state => state.member.info,
            })
        },
        mounted() {
            this.getcity();
        },
        methods: {
            ...mapMutations({
                savecity: 'savecity',
            }),
            // 前往路线定制
            tomade(){
                this.$router.go(-1)
            },
            //获取城市列表
            getcity(keyword){
                getTravelcity(this.params,keyword).then(res=>{
                    this.citylist=res.result
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //选择城市
            selectcity(data){
                this.savecity(data);
                this.$router.go(-1)
            },
            //搜索城市
            searchcity(){
                this.getcity(this.keyword)
            }
        }
    }
</script>

<style scoped lang="scss">
    .hotel-head {
        background: $primaryColor;
        padding: 20px;

        .hotel-title {
            position: relative;
            font-size: .8rem;
            font-weight: bold;
            text-align: center;
            padding: 20px 0;
            color: white;
            .hotel-cancel{
                position: absolute;
                left: 0;
                top: 20px;
                width: 23px;
                height: 23px;
            }
        }

        .hotel-search {
            display: block;
            width: 70vw;
            margin: auto;
            padding: 8px 10px;
            border-radius: 100px;
            border: none;
            text-align: center;
            font-size: .7rem;
        }

    }

    .city-body{
        /*padding: 20px;*/
        .city-body-list{
            padding: 10px;
            border-bottom: 1px solid #EEEFF2;
            font-size: .7rem;
        }
    }
</style>
